<template>
  <!-- 用户推荐：从网站已有的网址中选择 -->
  <div>
<!--    <el-dropdown>-->
<!--      <span class="el-dropdown-link">-->
<!--        选择您要推荐站内网址-->
<!--        <el-icon class="el-icon&#45;&#45;right">-->
<!--          <arrow-down />-->
<!--        </el-icon>-->
<!--      </span>-->
<!--      <template #dropdown>-->
<!--        <el-dropdown-menu>-->
<!--          <el-dropdown-item>Action 1</el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </template>-->
<!--    </el-dropdown>-->



    <el-input v-model="topWeb.topWebURL" placeholder="输入合法网址">
      <template #prepend>推荐网址</template>
    </el-input>
    <el-input v-model="topWeb.title" placeholder="输入网址名称">
      <template #prepend>网址名称</template>
    </el-input>
    <el-input v-model="topWeb.reason" placeholder="输入24字以内的推荐理由">
          <template #prepend>推荐理由</template>
    </el-input>


    <el-button style="display: flex;" plain @click="add">提交</el-button>
  </div>

  <div class="chat-output" style="position: relative">
    <ul class="glass-card-container">
      <li v-for="(msg,index) in recommendList" :key="msg.topWebURL" >
        <el-button type="warning" style="position:absolute;top: 0;right: 0" :icon="Star" @click="starClick(msg.topWebId)"  circle >{{msg.count}}</el-button>
        <div class="glass-card">
          <a :href="msg.topWebURL" class="custom-link" target="_blank">
            <img :src="'https://api.vvhan.com/api/ico?url=' + msg.topWebURL" />
            <div>

            </div>
            <div class="title">{{ msg.title }}</div>
            <div class="content">{{ msg.reason }}</div>
          </a>
        </div>
      </li>
    </ul>
  </div>



</template>
  
<script setup lang="ts">
import {onMounted, ref} from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'
import axios from "axios";

import {
  Star,
} from '@element-plus/icons-vue'

const recommendList = ref<[{
  topWebId:number,
  title: string,
  topWebURL: string,
  reason: string,
  count:number
}, {
  topWebId:number,
  title: string,
  topWebURL: string,
  reason: string,
  count:number
}, {
  topWebId:number,
  title: string,
  topWebURL: string,
  reason: string,
  count:number
}]>([{
  topWebId:0,
  title: "百度",
  topWebURL: "http://www.baidu.com",
  reason: "我喜欢这个网址",
  count:0
}, {
  topWebId:1,
  title: "百度",
  topWebURL: "http://www.baidu.com",
  reason: "我喜欢这个网址",
  count:0
}, {
  topWebId:2,
  title: "百度",
  topWebURL: "http://www.baidu.com",
  reason: "我喜欢这个网址",
  count:0
}]);


const topWeb  = ref({
  topWebId:3,
  topWebURL : "",
  reason:"",
  title:"",
  count:0
})

onMounted(()=>{
  qurry()
})
function add() {
  axios.post("http://localhost:8080/api/addTop", {
    topWebURL: topWeb.value.topWebURL,
    reason: topWeb.value.reason,
    title: topWeb.value.title,
    count: 0
  })
      .then(response => {
        if (response.data == true) {
          confirm("添加成功")
        }
      })
      .catch(error => {
        if (axios.isAxiosError(error) && error.response?.status === 409) {
          confirm("添加重复")
        }
      });
}

function qurry(){
  // responList.value=axios.get("http://localhost:8080/api/getTop")

  axios.get('http://localhost:8080/api/getTop')
      .then(response => {
        recommendList.value = response.data.sort((a:any, b:any) => b.count - a.count);
      })
      .catch(error => {
        console.error(error);
      });
}
function starClick(topWebId: number) {
  axios.post("http://localhost:8080/api/starClick", topWebId, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
      .then(response => {
        console.log(response.data);
        if(response.data=='success'){
          confirm("收藏成功")
        }
      })
      .catch(error => {
        console.error(error);
      });
}


</script>
  
<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.chat-output {
  display: flex;
  justify-content: center;
}

.glass-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.glass-card-container li {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #444;
  transition: transform 0.3s ease-in-out;
  width: 300px;
  margin-bottom: 10px;
}

.glass-card-container li:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.glass-card-container li img {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 50%;
}

.glass-card-container .content {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.glass-card-container .title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}
</style>
  
  